import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../layout/Home.vue'
import local from '../utils/local.js'

Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

const routes = [
  {
    path: '/',
    redirect: 'home'
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    redirect: '/dashboard',
    children: [
      // 后台首页
      {
        path: '/dashboard',
        meta: { name: '后台首页', icon: 'icon-shouye' },
        component: () => import('../views/Dashboard/index.vue')
      }
    ]
  },
  // 登录页
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  },
  // 404页面
  {
    path: '*',
    name: 'Error',
    component: () => import('../views/Error.vue')
  }
]
// import(/* webpackChunkName: "about" */ '../views/About.vue')

const syncRoute = {
  path: '/home',
  name: 'Home',
  component: Home,
  redirect: '/dashboard',
  children: [
    // 后台首页
    {
      path: '/dashboard',
      visible: true,
      meta: { name: '后台首页', icon: 'icon-shouye' },
      component: () => import('../views/Dashboard/index.vue')
    },
    // 订单管理页
    {
      path: '/order',
      visible: true,
      meta: { name: '订单管理', icon: 'icon-icon-' },
      redirect: '/order/list',
      component: () => import('../views/Order/index.vue'),
      children: [
        // 订单列表页
        {
          path: '/order/list',
          visible: true,
          meta: { name: '订单列表' },
          component: () => import('../views/Order/OrderList.vue')
        },
        // 订单编辑页
        {
          path: '/order/edit',
          visible: false,
          meta: { name: '订单编辑', role: ['super'] },
          component: () => import('../views/Order/OrderEdit.vue')
        }
      ]
    },
    // 商品管理页
    {
      path: '/pro',
      visible: true,
      meta: { name: '商品管理', icon: 'icon-shangpin' },
      redirect: '/pro/list',
      component: () => import('../views/Product/index.vue'),
      children: [
        // 商品列表页
        {
          path: '/pro/list',
          visible: true,
          meta: { name: '商品列表' },
          component: () => import('../views/Product/ProList.vue')
        },
        // 商品添加页
        {
          path: '/pro/add',
          visible: true,
          meta: { name: '商品添加' },
          component: () => import('../views/Product/ProAdd.vue')
        },
        // 商品分类页
        {
          path: '/pro/cate',
          visible: true,
          meta: { name: '商品分类' },
          component: () => import('../views/Product/ProCate.vue')
        },
        // 商品编辑页
        {
          path: '/pro/edit',
          visible: false,
          // name: 'proedit',
          meta: { name: '商品编辑' },
          component: () => import('../views/Product/ProEdit.vue')
        }
      ]
    },
    // 店铺管理页
    {
      path: '/shop',
      visible: true,
      meta: { name: '店铺管理', role: ['super'], icon: 'icon-dianpu' },
      component: () => import('../views/Shop/index.vue')
    },
    // 账号管理页
    {
      path: '/account',
      visible: true,
      meta: { name: '账号管理', icon: 'icon-zhanghao' },
      redirect: '/account/list',
      component: () => import('../views/Account/index.vue'),
      children: [
        // 账号列表页
        {
          path: '/account/list',
          visible: true,
          meta: { name: '账号列表', role: ['super'] },
          component: () => import('../views/Account/AccountList.vue')
        },
        // 添加账号页
        {
          path: '/account/add',
          visible: true,
          meta: { name: '添加账号', role: ['super'] },
          component: () => import('../views/Account/AccountAdd.vue')
        },
        // 修改密码页
        {
          path: '/account/reset',
          visible: true,
          meta: { name: '修改密码' },
          component: () => import('../views/Account/ResetPwd.vue')
        },
        // 个人中心页
        {
          path: '/account/center',
          visible: false,
          meta: { name: '个人中心' },
          component: () => import('../views/Account/Center.vue')
        }
      ]
    },
    // 销售统计页
    {
      path: '/sell',
      visible: true,
      meta: { name: '销售统计', role: ['super'], icon: 'icon-tongji' },
      redirect: '/sell/goods',
      component: () => import('../views/SellCount/index.vue'),
      children: [
        // 商品统计页
        {
          path: '/sell/goods',
          visible: true,
          meta: { name: '商品统计' },
          component: () => import('../views/SellCount/GoodsCount.vue')
        },
        // 订单统计页
        {
          path: '/sell/order',
          visible: true,
          meta: { name: '订单统计' },
          component: () => import('../views/SellCount/OrderCount.vue')
        }
      ]
    }
  ]
}

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  const token = local.get('token')
  if (token) {
    next()
  } else {
    if (to.path === '/login') {
      next()
    } else {
      next('/login')
    }
  }
})

createRoute()

export function createRoute() {
  const role = local.get('role')
  if (!role) return
  const finalArr = calcRoute(syncRoute.children, role)
  syncRoute.children = finalArr
  router.addRoutes([syncRoute])
  const finalMenu = calcMenu(finalArr)
  local.set('Menu', JSON.stringify(finalMenu))
}

function calcMenu(arr) {
  return arr.filter(item => {
    if (item.visible) {
      if (item.children && item.children.length > 0) {
        item.children = calcMenu(item.children)
      }
      return true
    } else {
      return false
    }
  })
}

function calcRoute(arr, role) {
  return arr.filter(item => {
    if (hasPermission(item, role)) {
      if (item.children && item.children.length > 0) {
        item.children = calcRoute(item.children, role)
      }
      return true
    } else {
      return false
    }
  })
}

function hasPermission(o, r) {
  if (o.meta && o.meta.role) {
    return o.meta.role.includes(r)
  } else {
    return true
  }
}

export default router
